<template>
	<view class="tracking">
		<view class="header">物流状态</view>
		<u-empty :show="State == 0" mode="data" text="没有物流信息" icon="http://cdn.uviewui.com/uview/empty/data.png">
		</u-empty>
		<u-steps current="0" direction="column" dot>
			<u-steps-item v-for="(item, index) in list.Traces" :key="index" :title="item.AcceptStation"
				:desc="item.AcceptTime">
				<text slot="condition" v-if="index === 0" style="font-size: 16px;">{{condition}}</text>
			</u-steps-item>
		</u-steps>
	</view>
</template>

<script>
	import {
		expressCheck
	} from '@/utils/index.js'
	export default {
		props: {
			expressageId: {
				type: String,
				default: ''
			},
			sfPhone: {
				type: String,
				default: ''
			}
		},
		computed: {
			condition() {
				//0：暂无轨迹，1:快递收件，2：在途中,3：签收,4：问题件 5.疑难件 6.退件签收
				if (this.State) {
					return this.State == 0 ? '暂无轨迹' : this.State == 1 ? '快递收件' : this.State == 2 ? '在途中' :
						this.State == 3 ? '已签收' :
						this.State == 4 ? '问题件' :
						this.State == 5 ? '疑难件' : this.State == 6 ? '退件签收' : ''
				}
			}
		},
		watch: {
			expressageId(val) {
				//获取寄回手机后四位
				let fourFigure = this.sfPhone.substring(this.sfPhone.length - 4)
				let zz = /^[A-Za-z0-9-]{4,35}$/
				console.log('快递单号监听', val, fourFigure)
				//顺风快递单号
				if (zz.test(val)) {
					this.getexpressCheck(`${val}:${fourFigure}`)
				} else {
					this.getexpressCheck(val)
				}
			}
		},
		data() {
			return {
				list: {},
				State: ''
			}
		},
		mounted() {
		},
		methods: {
			//获取快递信息
			getexpressCheck(val) {
				expressCheck(val).then(res => {
					console.log('获取快递信息', res)
					this.list = res
					this.list.Traces = res.Traces ? res.Traces.reverse() : [],
					this.State = res.State
				}).catch(err => {
					console.log('失败快递信息', err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tracking {
		background-color: #fff;
		padding: 20rpx;

		.header {
			background: -webkit-linear-gradient(top, #EEF3FF, #FCFDFF);
			padding: 10px;
			border-radius: 12px 12px 0 0;
			font-size: 14px;
		}
	}
</style>
